<template>
  <div>
    <Select ref="select" v-model="checkList" loading-text="搜索中..." not-found-text="无相关人员" placeholder="请输入搜索姓名"
      :multiple="multiple" :transfer="true" @on-change="clickAction" filterable remote :remote-method="searchUser"
      :label="checkList" :loading="leaderLoading">
      <Option v-for="(option, index) in searchList" :value="option.id" :label="option.user_name" :key="index">
        {{option.user_name + ( isSysUser && ((typeof option.id) != 'number' || option.id === -1) ? "(非系统成员)":"")}}
        <li v-for="(i,index) in option.structs " :key="index" style="margin-left: 10px;font-size:10px; color:#c5c8ce;">{{i.gName + (i.isleader == 1 ? "(领导)":'')}}</li>
      </Option>
    </Select>
  </div>
</template>
<script>
  import ajax from "../ajax_util"
  export default {
    name: "inputSearch",
    data() {
      return {
        checkList: this.checkLable,
        searchList: this.dataList,
        isSearch: true,
        leaderLoading: false,
      }
    },
    created: function() {},
    methods: {
      searchUser(name) {
        if (name != "" && name != this.checkLable && this.dataList.find(e => e.user_name == name) == undefined) {
          console.log(name)
          this.leaderLoading = true
          this.utils.delay(() => {
            var that = this;
            var url = this.CONFIG.url_know + "/searchUser/" + name;
            if (!this.multiple) {
              this.searchList = []
            }

            ajax.get({
              url: url,
              that: that,
              cache: true,
              params: null,
              success: function(data) {
                if (data.length > 0) {
                  data.forEach(item => {
                    if (that.searchList.find(e => e.id === item.id) == undefined) {
                      that.searchList.push(item)
                    }
                  })
                }
                if (that.isSysUser) {
                  that.searchList.push({
                    id: name,
                    user_name: name,
                    structs: []
                  })
                }
                that.$nextTick(() => {
                  that.leaderLoading = false
                })
              }
            })
          }, 500)
        } else {
          this.checkList = this.checkLable
          this.searchList = this.dataList
        }
      },
      getCheckInfo() {
        var temp = []
        this.checkList.forEach(item => {
          var t = this.searchList.find(e => e.id = item)
          if (t != undefined) {
            temp.push(t)
          }
        })
        return temp
      },
      clickAction(value) {
        console.log("---------->", value, this.checkList, this.searchList)
        if (value != undefined) {
          var list = []
          if (this.multiple) {
            value.forEach(item => {
              var t = this.searchList.find(e => e.id === item)
              list.push(t)
            })
          } else {
            var t = this.searchList.find(e => e.id === value)
            list.push(t)
          }
          this.$emit('on-change', list);
        } else {
          this.checkList = this.checkLable
        }
      }
    },
    computed: {},
    props: {
      isSysUser: {
        default: true,
      },
      checkLable: {
        default: ""
      },
      dataList: {
        type: Array,
        default: []
      },
      multiple: {
        type: Boolean,
        default: true
      },
      filterable: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      dataList(newV, oldV) {
        console.log("newV,oldV---------1---------", this.checkLable, newV)
        this.checkList = this.checkLable
        this.searchList = newV
      }
    }
  }
</script>
